<template>
    <div class="index">
        <MyHead :info="userInfo"/>
        <div class="body">
            <div class="left">
                <Nav :role="userInfo.role" />
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import MyHead from "co/MyHead";
import Nav from "co/Nav";
import { mapState,mapActions } from 'vuex';
export default {
    name: 'WebIndex',
    components: { MyHead,Nav },
    computed: {
        ...mapState('User',['userInfo']),
    },
    methods: {
        ...mapActions('User',['getUserInfo']),
    },
    mounted() {
        this.getUserInfo();
    },
};
</script>

<style lang="less" scoped>
@import "asle/index.less";
.index {
    .size();
    .body {
        .size(100%,calc(100% - 80px));
        .df();
        .f_ai();
        .left {
            .size(240px,100%);
            .bg(#4A9CF8);
            .pos_r();
        }
        .right {
            .size(calc(100% - 240px),100%);
            .padd(10px);
        }
    }
}
</style>